<template>
  <div>

    <template v-if="$app.judgeData(orderInfo) && $app.judgeData(orLiInfo)">

      <!-- 右上角 fixed框：官费，服务，总价 -->
      <!-- 订单状态,0已取消,1已下单,2已支付 -->
      <div class="rMoneyBox padding10"
        :style="`width:${suoJ?'200px':'50px'}; height:${suoJ?'auto':'50px'};`"
      >
        <div v-show="suoJ">
          <div class="f_16 f_bold  c333 marginB10">{{orLiInfo.goods_name}}</div>
          <div class="paddingLR15 c999">
            <div class="f_14">
              官费：¥
              <span>{{parseFloat(orLiInfo.official_fee)}}</span>
            </div>
            <div class="f_14 marginB5">
              服务费：¥
              <span>{{parseFloat(orLiInfo.service_fee)}}</span>
            </div>
            <div class="f_16">
              价格：¥
              <span class="cRed f_24 f_bold">{{parseFloat(orLiInfo.order_money)}}</span>
            </div>
          </div>
        </div>
        <Icon 
          :type="`${suoJ?'ios-arrow-dropright':'ios-arrow-dropleft-circle'}`"
          size="28"
          class="pointer suoJ "
          :class="`${suoJ?' cCCC':' cBlue'}`"
          @click="suoJ=!suoJ"
        />
      </div>

      <!-- write_only: 只有撰写订单才需要判断, 1纯撰写不代交, 0撰写及代交 -->
      <template v-if="orderInfo.write_only==0">
        <Button type="primary"  
          class=" rMoneyBox widthAuto " 
          @click="zD_SM=!zD_SM"
          :style="`top:${suoJ?280:170}px`"
        >
          操作说明
        </Button>
      </template>

      

      


      <Card class="marginB10">
        <div >
          <div>
            <div class="TJ_big">
              <div class="lineH34 c333 f_16 f_bold marginB10">
                <Row :gutter="15" class=" ">
                  <Col :span="8">
                    订单状态：<span class="f_24 cBlue f_bold">{{orderInfo.state_name}}</span>
                  </Col>
                  <Col :span="8">
                    <template v-if="orderInfo.has_writer">
                      <span class="liYxX" style="padding-left:20px;" @click="xTxG">
                        <span class="f_16 textLink  marginR10">撰写留言</span>
                        <i class="iconxiaoxi iconfont cBlue f_20 f_bold pointer"></i>
                        <div class="redP cRed f_12" v-show="orderInfo.write_contact_unread_count>0">{{orderInfo.write_contact_unread_count}}</div>
                      </span>
                    </template>
                    
                  </Col>
                </Row>
              </div>
            </div>
          </div>
          
          <div class="TJ_big paddingL30">
            <Row  :gutter="15" class="marginB15">
              <Col :span="8">{{orLiInfo.goods_name}}</Col>
              <Col :span="8">订单编号：{{orLiInfo.order_no}}</Col>
            </Row>

            <!-- 已付款 -->
            <template v-if="orLiInfo.state==2">

              <!-- write_only: 只有撰写订单才需要判断, 1纯撰写不代交, 0撰写及代交 -->
              <template v-if="orderInfo.write_only==0">
                <div>
                  <!-- 没有填申请人信息 可以判断为没有补充资料 -->
                  <template v-if="!$app.judgeData(orderInfo.applicant_list)">
                    <Button type="primary"  class="marginR10" @click="ttW(false)">
                      <Icon type="ios-create-outline" size="18" class="relative marginR5" />补充资料
                    </Button>
                  </template>
                  <template v-else-if="orderInfo.state==2">
                    <Button type="primary"  class="marginR10" @click="ttW(true)">
                      <Icon type="ios-create-outline" size="18" class="relative marginR5" />修改资料
                    </Button>
                  </template>

                  
                </div>
              </template>


              
            </template>

            <!-- 未付款 -->
            <template v-else-if="orLiInfo.state==1">
              <Button type="primary" class="marginR30" @click="zFu()">
                <Icon type="logo-yen" size="14" class="relative marginR5"  />
                立即支付
              </Button>
            </template>
            
            
          </div>
        </div>

        <div class="clearBoth "></div>

      </Card>


      <template v-if="
        (orderInfo.state==14)&&
       $app.judgeData(orderInfo.note)
      ">
        <Card class="marginB20" >
          <!-- 14待缴办理登记费，=》 专利订单里面另外有两次缴费操作 -->
          <span class="lineH34 c333 f_16 f_bold marginR20 relative" >系统预警</span>
          <Button type="primary" class="marginR30 relative" style="top:-2px;" @click="zFuFF(parseInt(orderInfo.state))">
            <Icon type="logo-yen" size="14" class="relative marginR5"  />
            {{pagText(parseInt(orderInfo.state))}}
          </Button>
          
          
          <!-- 缴办理登记费 -->
          <template v-if="orderInfo.state==14">
            请下载：
            <span class="marginR10 underline f_16 textLink cBlue" @click="$app.fileNameAgainDown($app.getVal_fileUrl(orderInfo.note.auth_note_path),orderInfo,orLiInfo)">
              授权通知书
            </span>
            <span class="marginR30 underline f_16 textLink cBlue" @click="$app.fileNameAgainDown($app.getVal_fileUrl(orderInfo.note.dealt_register_note_path),orderInfo,orLiInfo)">
              办理登记通知书
            </span>
            <span class="cRed f_16 marginR30">期限：{{orderInfo.note.dealt_register_limit_date}}</span>
          </template>
        </Card>
        <!-- 最后一步的缴办登费 -->
        <PayZL ref="PayZL" />
      </template>

      <His_list_pay :orderInfo="orderInfo" :orLiInfo="orLiInfo" />




      <!-- 已下单未付款 -->
      <template v-if="orderInfo.state==1">
        <!-- 下单成功支付框 -->
        <PayBox ref="payBox" :noOrderList="true" />
      </template>

      
      
    </template>
    

    <!-- 撰写留言 -->
    <LiuYanKk ref="liuYanKk" :orderInfo="orderInfo" :orLiInfo="orLiInfo"/>
    



    <Modal
      v-model="zD_SM"
      title="操作说明"
      :footer-hide="true"
      :mask-closable="false"
      width="900"
      class-name="vertical-center-modal"
      @on-visible-change="vCbox"
    > 
      <div style="margin:-16px; ">
        <div :style="`overflow-y:auto; max-height: ${$app.winHeight-150}px;`">
          <img :src="zD_img">
          <!-- {{$app.winHeight-500}} -->
        </div>
        
      </div>
    </Modal>


  </div>
</template>

.<style lang="less" scoped>
.liYxX{
  position: relative;
  .redP{
    position: absolute;
    top:-8px;
    line-height: 12px;
    left:118px;
  }
}
</style>


<script>

import His_list_pay from "./plugin/his_list_pay";
import PayBox from "@$@/_service/payBox";
import LiuYanKk from './liuYanKk';
import zD_img from '@$@/img/mary/zD_img.jpg';
import PayZL from "./plugin/payZL";

export default {
  name: "pDthirdTop",
  components: {LiuYanKk,PayBox,PayZL,His_list_pay},
  props: ["orderInfo", "orLiInfo"],
  data() {
    
    let patentWriteTips=$app.getLocal('patentWriteTips');
    let {
      $route:{
        query:{
          order_id,
          pW_List_warn
        }
      }
    }=this;

    let data = {
      order_id,
      pW_List_warn,
      zD_img,
      zD_SM:(!$app.judgeData(pW_List_warn) && !$app.judgeData(patentWriteTips)),//地址栏没有值，并且，本地存没有值，才显示弹框
    };
    let tool = {
      showButton:false,
      suoJ:true//右上角浮动框：true显示，false隐藏
    };
    return Object.assign(data, tool);
  },
  watch: {
    
    orLiInfo(newVal, oldVal){
      let {
        goods_type,
        state//订单状态,0已取消,1已下单,2已支付
      }=newVal;

      if(state==2){
        this.suoJ=false
      }

    },
    orderInfo(newVal,oldVal){}
  },
  mounted() {
    let {pW_List_warn,order_id}=this;
    
    if(!$app.judgeData(pW_List_warn)){
      //弹框存入，日后永远都不会自动再弹出了 
      $app.setLocal(true,'patentWriteTips');
    }

    
  },
  methods: {
    pagText(state) {
      let out = "";
      switch (state) {
        case 5:
          out = "缴纳申请费";
          break;
        case 14:
          out = "缴纳办理登记费";
          break;
      }
      return out;
    },
    zFuFF(state) {
      let {
        $route: {
          query: { order_id }
        }
      } = this;
      this.$refs['PayZL'].payBox=true;
      this.$refs['PayZL'].orderInfo=this.orderInfo;
    },
    xTxG(){
      this.$refs['liuYanKk'].liuYanKk=true;
    },
    ttW(buEr){//buEr是否已经补充资料过一次，再一次去修改补充资料？
      let that=this;
      let {
        $route: {
          query: { 
            order_id
          }
        },
        orLiInfo:{
          goods_type,
          goods_id
        }
      }=that;

      // 配合上面两者适用 doW:1保留本页，2关闭本业
      $app.goEditDpeiH(2,order_id,goods_type,goods_id,buEr);

    },

    zFu() {
      let {
        $route: {
          query: { order_id }
        }
      } = this;
      $app.payBoxShow(this, order_id,{
        payFun:() => {
          this.$parent.getData();//调用父亲初始化数据方法
        }
      });
    },
    vCbox(buEr){
      if(buEr){//框框显示
        
      }
    }
  }
};
</script>

